<template>
  <div class="container">
    <Breadcrumb :items="['商家管理', '支付记录']" />
    <a-card class="general-card" title="商家支付记录">
      <a-row>
        <a-col :flex="1">
          <a-form :model="searchForm" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="biz_id" label="商家ID">
                  <a-input v-model="searchForm.biz_id" placeholder="请输入商家ID" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="user_phone" label="用户手机号">
                  <a-input v-model="searchForm.user_phone" placeholder="请输入用户手机号" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="pay_status" label="支付状态">
                  <a-select v-model="searchForm.pay_status" placeholder="请选择支付状态" allow-clear>
                    <a-option :value="1">已支付</a-option>
                    <a-option :value="0">未支付</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="start_time" label="开始时间">
                  <a-date-picker v-model="searchForm.start_time" placeholder="请选择开始时间" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="end_time" label="结束时间">
                  <a-date-picker v-model="searchForm.end_time" placeholder="请选择结束时间" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item>
                  <a-space>
                    <a-button type="primary" @click="search">
                      <template #icon>
                        <icon-search />
                      </template>
                      搜索
                    </a-button>
                    <a-button @click="reset">
                      <template #icon>
                        <icon-refresh />
                      </template>
                      重置
                    </a-button>
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :flex="1">
          <a-space>
            <a-button type="primary" @click="refresh">
              <template #icon>
                <icon-refresh />
              </template>
              刷新
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="columns" :scroll="{ x: 1890 }"
         :data="renderData" :bordered="{ cell: true }" @page-change="onPageChange">
        <template #pay_status="{ record }">
          <a-tag :color="record.pay_status === 1 ? 'green' : 'red'">
            {{ record.pay_status_text }}
          </a-tag>
        </template>
        <template #score_status="{ record }">
          <a-tag :color="record.score_status === 1 ? 'green' : 'red'">
            {{ record.score_status_text }}
          </a-tag>
        </template>
        <template #money_status="{ record }">
          <a-tag :color="record.money_status === 1 ? 'green' : 'red'">
            {{ record.money_status_text }}
          </a-tag>
        </template>
        <template #paid_at="{ record }">
          {{ record.paid_at != false ? record.paid_at : '-' }}
        </template>
        <template #operations="{ record }">
          <a-space>
            <a-link  @click="handleView(record)">
              查看
            </a-link>
            <a-popconfirm content="确定要删除这条记录吗？" @ok="handleDelete(record)">
              <a-link >
                删除
              </a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 详情弹窗 -->
    <a-modal v-model:visible="detailVisible" title="支付记录详情" :footer="false" width="800px">
      <a-descriptions :data="detailData" layout="vertical" bordered :column="2" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { queryBizPayRecordList, delBizPayRecord, type BizPayRecord } from '@/api/bizPayRecord';
import useLoading from '@/hooks/loading';

const { loading, setLoading } = useLoading();
const renderData = ref<BizPayRecord[]>([]);
const searchForm = reactive({
  biz_id: '',
  user_phone: '',
  pay_status: undefined as number | undefined,
  start_time: '',
  end_time: '',
});

const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 所有列的width总和：80+200+130+100+100+100+120+120+120+120+100+180+180+120 = 1890
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '商家名称',
    dataIndex: 'biz_name',
    width: 200,
  },
  {
    title: '用户手机号',
    dataIndex: 'user_phone',
    width: 130,
  },
  {
    title: '原价',
    dataIndex: 'pay_price',
    width: 100,
  },
  {
    title: '实付金额',
    dataIndex: 'pay_money',
    width: 100,
  },
  {
    title: '折扣',
    dataIndex: 'discount',
    width: 80,
  },
  {
    title: '云豆数量',
    dataIndex: 'score',
    width: 100,
  },
  {
    title: '福利卡云豆',
    dataIndex: 'card_score',
    width: 120,
  },
  {
    title: '微信支付差额',
    dataIndex: 'money',
    width: 120,
  },
  {
    title: '云豆支付状态',
    dataIndex: 'score_status',
    slotName: 'score_status',
    width: 120,
  },
  {
    title: '微信支付状态',
    dataIndex: 'money_status',
    slotName: 'money_status',
    width: 120,
  },
  {
    title: '支付状态',
    dataIndex: 'pay_status',
    slotName: 'pay_status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 180,
  },
  {
    title: '补差价时间',
    dataIndex: 'paid_at',
    slotName: 'paid_at',
    width: 180,
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
    width: 120,
    fixed: 'right',
  },
];
// 总宽度：1890

// 详情弹窗
const detailVisible = ref(false);
const detailData = ref<any[]>([]);

const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await queryBizPayRecordList({
      current: pagination.current,
      pageSize: pagination.pageSize,
      biz_id: searchForm.biz_id,
      user_phone: searchForm.user_phone,
      pay_status: searchForm.pay_status,
      start_time: searchForm.start_time,
      end_time: searchForm.end_time,
    });
    renderData.value = data.list;
    pagination.total = data.total;
  } catch (err) {
    // 错误处理
  } finally {
    setLoading(false);
  }
};

const search = () => {
  pagination.current = 1;
  fetchData();
};

const reset = () => {
  Object.assign(searchForm, {
    biz_id: '',
    user_phone: '',
    pay_status: undefined,
    start_time: '',
    end_time: '',
  });
  pagination.current = 1;
  fetchData();
};

const refresh = () => {
  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const handleView = (record: BizPayRecord) => {
  detailData.value = [
    { label: 'ID', value: record.id },
    { label: '商家ID', value: record.biz_id },
    { label: '商家名称', value: record.biz_name },
    { label: '用户ID', value: record.user_id },
    { label: '用户手机号', value: record.user_phone },
    { label: '原价', value: `¥${record.pay_price}` },
    { label: '实付金额', value: `¥${record.pay_money}` },
    { label: '折扣', value: record.discount || '-' },
    { label: '支付差额', value: `¥${record.money}` },
    { label: '云豆数量', value: record.score },
    { label: '福利卡云豆', value: record.card_score },
    { label: '支付状态', value: record.pay_status_text },
    { label: '云豆支付状态', value: record.score_status_text },
    { label: '微信支付状态', value: record.money_status_text },
    { label: '支付时间', value: record.paid_at || '-' },
    { label: '微信支付订单号', value: record.transaction_id || '-' },
    { label: '创建时间', value: record.created_at },
    { label: '更新时间', value: record.updated_at },
  ];
  detailVisible.value = true;
};

const handleDelete = async (record: BizPayRecord) => {
  try {
    await delBizPayRecord(record.id);
    Message.success('删除成功');
    fetchData();
  } catch (err) {
    Message.error('删除失败');
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
</style>
